<template>
  <div class="box">
    <div class="box-top">
      <img src="@/assets/img/active.webp" class="box-top-img" />
    </div>
    <div class="box-bottom">
      <Searchbar></Searchbar>
      <div class="box-bottom-right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Searchbar from "@/components/common/tabbar/searchbar.vue";
import { getActive } from "@/server/active";
import { onMounted } from "vue";

onMounted(async () => {
  await getList();
});
function getList() {
  getActive().then((res: any) => {
    window.localStorage.setItem("list", JSON.stringify(res.list));
  });
}
</script>

<style scoped lang="less">
.box {
  width: 80%;
  // background-color: pink;
  margin: 0 auto;
  &-top {
    width: 100%;
    height: 240px;
    margin-bottom: 50px;
    &-img {
      width: 100%;
      height: 100%;
    }
  }
  &-bottom {
    display: flex;
    &-right {
      margin-left: 15px;
      width: 70%;
    }
  }
}
</style>
